/**
 * Copyright (c) 2021 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
.container {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.content {
    width: 100%;
    height: 120%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.todo-wraper {
    width: 100%;
    height: 100%;
    margin-top: 15px;
    columns: 1;
}

.todo-item {
    width: 100%;
    height: 123px;
    padding-left: 45px;
    padding-right: 45px;
    flex-direction: row;
    columns: 1;
    align-items: stretch;
}

.todoFavorites {
    width: 100%;
    height: 123px;
    flex-direction: row;
    columns: 1;
    align-items: stretch;
}

.todo-title-div {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 15px;
    display: flex;
}

.todo-user-title-div {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-right: 40px;
    margin-top: 15px;
    display: flex;
}


.setting-parent-div {
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
}

.setting-parent-div-text {
    width: 100%;
    height: 220px;
    align-items: flex-end;
    margin-bottom: 15px;
    margin-top: 15px;
}

.todo-setting-div {
    position: absolute;
    right: -15px;
    width: 90px;
    height: 90px;
}

.todo-setting-div:active {
    background-color: #F2F2F2;
}

.favorites-title-image {
    width: 90px;
    height: 90px;
}

.free-space {
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.favorites-image-icon {
    margin-top: -180px;
    width: 210px;
    height: 210px;
}

.free-space-text {
    font-size: 28px;
    margin-top: -30px;
    color: #999;
}

.favorites-free-div {
    align-content: flex-end;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    width: 96px;
    height: 96px;
    right: 50px;
    bottom: 48px;
    border-radius: 60px;
    opacity: 1;
}

.free-favorites-image {
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    width: 96px;
    height: 96px;
    opacity: 1;
    background-color: #007DFE;
}

.todo-title-div-div {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.todo-title {
    width: 200px;
    height: 100%;
    text-align: left;
}

.todo-title-name-text {
    width: 100%;
    height: 90px;
    text-align: left;
    font-size: 60px;
    font-weight: 500;
}

.todo-title-name-text-change {
    width: 50%;
    height: 70px;
    text-align: left;
    font-size: 50px;
    font-weight: 500;
}

.todo-title-name-frequent {
    height: 133px;
    text-align: left;
    font-size: 30px;
}

.todo-content-div {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
}

.first {
    width: 15%;
}


.todo-name-suffix-div {
    width: 80px;
    height: 80px;
    border-radius: 60px;
}

.todo-content-div-third {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 30%;
    height: 100px;
    justify-content: flex-end;
    right: 0px;

}

.todo-content-div-third:active {
    background-color: #d3d3d3;
}

.flex-item-check {
    right: -25px;
}

.todo-content-div-div {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-start: 32px;
}

.todo-content-name {
    width: 100%;
    text-align: left;
    font-size: 32px;
    font-weight: 600;
    max-lines: 1;
    text-overflow: ellipsis;
}

.todo-content {
    width: 100%;
    margin-top: 20px;
    text-align: left;
    max-lines: 1;
    text-overflow: ellipsis;
}

.todo-divider-favorite-div {
    width: 100%;
}

.todo-divider-div {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 32px;
    position: absolute;
    bottom: 0px;
    width: 98%;
}

.todo-divider {
    line-cap: round;
    stroke-width: 1px;
    color: #ccc;
}

.todo-divider-favorite {
    stroke-width: 1px;
    color: #ccc;
    width: 95%;
    margin-left: 0px;
    margin-top: 3px;
}

.todo-name-stack {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.todo-content-name-last {
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    font-size: 40px;
    allow-scale: true;
    font-weight: 600;
}

.flex-item-image {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.dialog-main {
    width: 900px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 25px;
}

.dialog-main-simple {
    width: 900px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 25px;
}

.dialog-div {
    flex-direction: column;
    align-items: center;
    height: 550px;
}

.dialog-div-simple {
    width: 85%;
    flex-direction: column;
    align-items: center;
}

.inner-div {
    width: 85%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 150px;
}

.inner-div-simple {
    margin-top: 40px;
    margin-bottom: 25px;
    height: 80px;
}

.dialog-inner-txt {
    font-size: 40px;
    font-weight: 600;
    text-align: left;
    margin-left: 15px;
}

.dialog-todo-wraper {
    width: 92%;
    columns: 1;
}

.dialog-todo-wraper-simple {
    columns: 1;
}

.dialog-todo-item {
    width: 100%;
    height: 120px;
    flex-direction: row;
    columns: 1;
    align-items: stretch;
}

.dialog-todo-content-div {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100px;
    width: 80%;
    margin-top: 8px;
    margin-bottom: 8px;
}

.dialog-todo-content-img-div {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 10px;
    width: 20%;
    height: 50px;
}

.one {
    width: 20%;
    justify-content: center;
    align-items: center;
}

.dialog-todo-content-img {
    width: 65px;
    height: 65px;
}

.dialog-todo-content-div-div {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100px;
    width: 100%;
}

.dialog-todo-content-name {
    width: 100%;
    text-align: left;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
}

.dialog-todo-content {
    width: 100%;
    text-align: left;
    max-lines: 1;
    text-overflow: ellipsis;
}

.inner-btn {
    width: 100%;
    height: 80px;
    justify-content: space-around;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.inner-btn-simple {
    height: 100px;
    margin-top: 20px;
}

.inner-btn-simple-set-default {
    height: 100px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.favorites-button-div {
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 96px;
    height: 96px;
    right: 50px;
    bottom: 48px;
    border-radius: 60px;
    position: absolute;
    opacity: 1;
}

.favorites-image {
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    width: 96px;
    height: 96px;
    opacity: 1;
    background-color: #254ff7;
}

.favorites-image:active {
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    width: 92px;
    height: 92px;
    opacity: 1;
    background-color: #254ff7;
}

.first-dialog-main {
    width: 900px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 25px;
}

.first-dialog-div {
    flex-direction: column;
    align-items: center;
    height: 580px;
}

.first-inner-div {
    width: 85%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 120px;
}

.first-dialog-inner-txt {
    font-size: 40px;
    font-weight: 600;
}

.first-dialog-todo-wraper {
    width: 92%;
    height: 55%;
    columns: 1;
}

.first-dialog-todo-item {
    width: 85%;
    height: 101px;
    flex-direction: row;
    columns: 1;
    align-items: stretch;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.first-dialog-todo-content-div {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.three {
    width: 20%;
    justify-content: center;
    align-items: center;
}

.first-dialog-todo-content-div-div {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.first-dialog-todo-content-name {
    width: 100%;
    text-align: left;
    font-size: 32px;
    font-weight: 600;
    margin-top: 8px;
}

.first-dialog-todo-content {
    width: 100%;
    text-align: left;
    max-lines: 1;
    text-overflow: ellipsis;
    font-size: 28px;
    color: #808080;
}

.first-dialog-todo-content-img {
    width: 50px;
    height: 50px;
}

.first-dialog-content-div {
    width: 85%;
    height: 100px;
    columns: 1;
    margin-left: 25px;
    margin-right: 25px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.fist-dialog-todo-content {
    width: 100%;
    text-align: left;
    max-lines: 1;
    text-overflow: ellipsis;
}

.fist-dialog-checkbox {
    width: 20%;
}

.todo-item-content-image {
    width: 80px;
    height: 80px;
    border-radius: 80px;
}

.todo-item-content-div {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.todo-divider-share {
    stroke-width: 1px;
    color: #d3d3d3;
}

.todo-title-div-favorite {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 120px;
    margin-left: 55px;
    margin-right: 25px;
    margin-top: 15px;
}

.contacts-back-but-div-favorite {
    width: 93px;
    height: 93px;
    border-radius: 15px;
    align-items: center;
}

.contacts-back-image-favorite {
    margin-left: 21px;
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.todo-setting-div-favorite {
    border-radius: 10px;
    margin-right: 0px;
    width: 90px;
    height: 90px;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
}

.todo-setting-div-favorite:active {
    background-color: #F2F2F2;
}

.contacts-title-operation-favorite {
    width: 90px;
    height: 90px;
}

.hidden-setting-favorite {
    animation-name: setting-hidden-animation;
    animation-duration: 100ms;
    animation-fill-mode: forwards;
}

.show-setting-favorite {
    animation-name: setting-show-animation;
    animation-duration: 700ms;
    animation-fill-mode: forwards;
}

.hidden-back-favorite {
    animation-name: back-hidden-animation;
    animation-duration: 700ms;
    animation-fill-mode: forwards;
}

.show-back-init-favorite {
    animation-name: back-show-animation;
    animation-duration: 0ms;
    animation-fill-mode: forwards;
}

.show-back-favorite {
    animation-name: back-show-animation;
    animation-duration: 100ms;
    animation-fill-mode: forwards;
}

.input-radio {
    margin-left: 0px;
    height: 120px;
}

.input-radio-text {
    flex-direction: row;
    align-content: center;
    align-items: center;
    height: 120px;
}

.btn-txt-favorite {
    width: 100%;
    text-align: center;
    color: #0000ff;
}

.records-detail-contacts-operate-blank {
    height: 200px;
    width: 100%;
    position: absolute;
}